import React, {Component} from 'react';
import Circle from './lib/Circle';

require('./css/frame.css');

export default class P3 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0, 0, 0, 0],
      flag: ['none','none'],
    };
  }

  onSlider(i) {
    let index = [0, 0, 0, 0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onClick(i) {
    let { flag} = this.state;
    flag[i] = 'block';
    this.setState({
      flag
    });
  }

  render() {
    const {index, flag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box3">
          <h4 className="title">联网方案</h4>
          {index[0] === 1 && <div className='box3Cont' id='box3100'>
            <div className='infodiv'>通过滑动鼠标查看探岳 TAYRON<br></br>的联网方案，以及各总线联网速度。</div>
            <img src={require('./img/3_0.jpg')}/>

            <Circle style={{left: '270', top: '240'}} data='CAN网络 500 kbit/s '/>
            <Circle style={{left: '270', top: '406'}} data='CAN网络 500 kbit/s'/>
            <Circle style={{left: '370', top: '500'}} data='LIN网络 19.2 kbit/s'/>
            <Circle style={{left: '610', top: '240'}} data='MOST150 150 Mbit/s'/>
            <Circle style={{left: '720', top: '240'}} data='CAN网络 500 kbit/s'/>
          </div>}

          {index[1] === 1 && <div className='box3Cont' id='box3200'>
            <div className='infodiv'>控制单元J104/J500，从驱动CAN移至底盘 CAN 总线。</div>
            <img src={require('./img/3_1.jpg')} style={{marginTop: 40}}/>
            <p style={{left: 200}}>驱动CAN总线</p>
            <p style={{left: 300}}></p>
            <p style={{left: 650}}>底盘CAN总线</p>
            <p style={{left: 750}}> 部分控制单元从驱动CAN移至底盘CAN，例如J104，J500。</p>
            <ul style={{left: 140,top:260}}>
              <li>E313 选档杆</li>
              <li>J234 安全气囊控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>J623 发动机控制单元</li>
              <li>J743 双离合变速箱机械电子单元</li>
            </ul>

            <ul style={{left: 510}}>
              <li>J104 ABS 控制单元</li>
              <li>J250 电控减震系统控制单元</li>
              <li>J446 泊车辅助系统控制单元</li>
              <li>J492 全时四轮驱动的控制单元</li>
              <li>J500 转向助力控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>J791 驻车转向辅助装置控制单元</li>
              <li>J928 全景影像控制单元</li>
            </ul>
          </div>}

          {index[2] === 1 && <div className='box3Cont' id='box33'>
            <div className='infodiv'>信息娱乐CAN总线和舒适CAN总线之间有MOST总线。<br></br>
              请点击MOST总线，查看详细介绍。
            </div>
            <img src={require('./img/3_2.jpg')} style={{position: 'absolute', top: -10}}/>
            <p style={{left: 400}}>信息娱乐CAN总线</p>
            <p style={{left: 720}}>舒适CAN总线</p>
            <ul>

              <li>J364 辅助加热系统控制单元</li>
              <li>J412 手机电子操作系统控制单元</li>
              <li>J525 数字式音响套件控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>J685 前部信息显示和操作系统控制单元的显示单元
                （MIB CAN 总线上取消 R 和 J685）
              </li>
              <li>J794 信息娱乐系统电子装置控制单元</li>
              <li>R 收音机</li>
              <li>R64 驻车加热装置无线电接收器</li>
              <li>RX6 电视机调谐器</li>
              <li>R189 倒车摄像头</li>
              <li>MIB 模块化信息娱乐系统CAN数据总线</li>
              <li>LVDS 低压差分信号</li>
              <li>MIB-CAN</li>
            </ul>
            <img
              src={require("./img/red0.png")}
              className="circle"
              style={{left: 560, top: 110}}
              onClick={this.onClick.bind(this,0)}
            />
            <div style={{display:flag[0]}}>
              MOST150数据总线组合仪表控制单元 J285。（只适用组合仪表 Active Info Display）数字式音响套件控制单元 J525。
              信息娱乐系统电子装置控制单元。
            </div>

          </div>}

          {index[3] === 1 && <div className='box3Cont' id='box34'>
            <div className='infodiv'>信息娱乐CAN总线和舒适CAN总线之间有MOST总线。<br></br>
              请点击MOST总线，查看详细介绍。
            </div>
            <img src={require('./img/3_3.jpg')} style={{position: 'absolute', top: 70, left: 10}}/>
            <p style={{left: 80}}>信息娱乐CAN总线</p>
            <p style={{left: 360}}>舒适CAN总线</p>
            <ul style={{left: 500}}>
              <li>舒适CAN总线</li>
              <li>E1 车灯开关</li>
              <li>E265 后部空调器的操作和显示单元</li>
              <li>G238 空气质量传感器</li>
              <li>G355 空气湿度传感器</li>
              <li>G397 雨量和光照识别传感器</li>
              <li>G578 防盗报警装置传感器</li>
              <li>G805 制冷剂循环回路压力传感器</li>
              <li>H12 报警喇叭</li>
              <li>J126 新鲜空气鼓风机控制单元</li>
              <li>J245 滑动天窗控制单元</li>
              <li>J255 Climatronic 全自动空调控制单元</li>
              <li>J285 组合仪表中的控制单元</li>
              <li>J345 挂车识别装置控制单元</li>
              <li>J362 防盗锁止系统控制单元</li>
              <li>J386 驾驶员侧车门控制单元</li>
              <li>J387 副驾驶员侧车门控制单元</li>
            </ul>

            <ul style={{left: 710}}>
              <li>J388 左后侧车门控制单元</li>
              <li>J389 右后侧车门控制单元</li>
              <li>J400 刮水器电机控制单元</li>
              <li>J501 多功能单元控制单元</li>
              <li>J519 车载电网控制单元</li>
              <li>J527 转向柱电子装置控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>J605 行李厢盖控制单元</li>
              <li>J764 电子转向柱锁控制单元</li>
              <li>J810 驾驶员座椅调节装置控制单元</li>
              <li>J938 行李厢盖开启控制单元</li>
              <li>J965 进入及起动许可接口</li>
              <li>V512 左前座椅靠背通风装置 1</li>
              <li>V514 左前座椅座垫通风装置 1</li>
              <li>V516 右前座椅靠背通风装置 1</li>
              <li>V518 右前座椅座垫通风装置 1</li>
            </ul>
            <img
              src={require("./img/red0.png")}
              className="circle"
              style={{left: 210, top: 160}}
              onClick={this.onClick.bind(this,1)}
            />
            <div style={{display:flag[1]}}>
              MOST150数据总线<br></br>
              组合仪表控制单元 J285。<br></br>
              （只适用组合仪表 Active Info Display）<br></br>
              数字式音响套件控制单元 J525。<br></br>
              信息娱乐系统电子装置控制单元。
            </div>

          </div>}

          {index[4] === 1 && <div className='box3Cont' id='box35'>
            <div className='infodiv'>扩展CAN总线，连接的控制单元都与驾驶员辅助系统相关。</div>
            <img src={require('./img/3_4.jpg')} style={{position: 'absolute', top: 40, left: 220}}/>
            <p style={{position: 'absolute', top: 40,left: 300,fontWeight:'bold'}}>扩展CAN</p>
            <p style={{position: 'absolute', top: 40,left: 550,fontWeight:'bold'}}>诊断CAN</p>
            <p style={{position: 'absolute', top: 250,left: 550,fontWeight:'bold'}}>网关的LIN总线</p>
            <ul style={{left: 35}}>
              <li style={{'listStyle': 'none',marginLeft: '-20px'}}>扩展CAN总线</li>
              <li>A27 右侧 LED 大灯电源模块 1</li>
              <li>A31 左侧 LED 大灯电源模块 1</li>
              <li>J428 车距调节装置控制单元</li>
              <li>J502 胎压监测控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>J667 左大灯电源模块</li>
              <li>J668 右大灯电源模块</li>
              <li>J745 随动转向灯和大灯照明距离调节控制单元</li>
              <li>J769 换道辅助系统控制单元</li>
              <li>J770 换道辅助系统控制单元 2</li>
              <li> R242 驾驶员辅助系统前部摄像头</li>
              <li>AFS 转向灯 CAN 数据总线</li>
              <li>SF 传感器融合 CAN 数据总线</li>
              <li>SW 换道辅助 CAN 数据总线</li>
            </ul>

            <ul style={{left: 730,width:170}}>
              <li  style={{'listStyle': 'none',marginLeft: '-20px'}}>诊断系统</li>
              <li>T16 诊断接口</li>
            </ul>

            <ul style={{left: 730,top:260,width:170}}>
              <li  style={{'listStyle': 'none',marginLeft: '-20px'}}>网关的LIN线连接</li>
              <li>C 三相交流发电机</li>
              <li>J367 蓄电池监控控制单元</li>
              <li>J453 多功能方向盘控制单元</li>
              <li>J533 数据总线诊断接口</li>
              <li>U13 带插座的逆变器， 12 V-230 V</li>
              <li>Y 模拟时钟</li>
            </ul>

          </div>}


          <div id="csld" className="sldcir" style={{left: 395}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


